<template>
    <div class="work-card" @click="$emit('click', work)">
      <div class="work-image">
        <img :src="work.image" :alt="work.title">
        <div class="overlay">
          <span class="view-details">查看详情</span>
        </div>
      </div>
      <div class="work-info">
        <h3 class="work-title">{{ work.title }}</h3>
        <div class="work-tags">
          <span v-for="(tag, index) in work.category.slice(0, 3)" :key="index" class="work-tag">
            {{ tag }}
          </span>
          <span v-if="work.category.length > 3" class="work-tag-more">+{{ work.category.length - 3 }}</span>
        </div>
        <p class="work-description">{{ truncatedDescription }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  
  const props = defineProps({
    work: {
      type: Object,
      required: true
    }
  });
  
  // 截断描述文字，显示前100个字符
  const truncatedDescription = computed(() => {
    if (props.work.description.length > 80) {
      return props.work.description.substring(0, 80) + '...';
    }
    return props.work.description;
  });
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/variables.scss';
  @import '../styles/animations.scss';
  
  .work-card {
    background-color: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(74, 108, 247, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    
    &:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 12px 28px rgba(74, 108, 247, 0.15);
      z-index: 2;
      
      .work-image .overlay {
        opacity: 1;
      }
      
      .work-image img {
        transform: scale(1.05);
      }
    }
    
    .work-image {
      height: 220px;
      position: relative;
      overflow: hidden;
      border-radius: 16px 16px 0 0;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
      }
      
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba($primary-color, 0.9), rgba($accent-color, 0.9));
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        
        .view-details {
          color: white;
          font-weight: 600;
          padding: 0.8rem 1.8rem;
          border: 2px solid white;
          border-radius: 30px;
          transition: all 0.3s ease;
          transform: translateY(10px);
          
          &:hover {
            background-color: white;
            color: $primary-color;
            transform: translateY(0);
          }
        }
      }
    }
    
    .work-info {
      padding: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .work-title {
      font-size: 1.4rem;
      margin-bottom: 1rem;
      color: $text-color;
      transition: color 0.3s ease;
      font-weight: 600;
      line-height: 1.3;
      
      &:hover {
        color: $primary-color;
      }
    }
    
    .work-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1.2rem;
      
      .work-tag, .work-tag-more {
        font-size: 0.85rem;
        padding: 0.3rem 0.8rem;
        border-radius: 16px;
        background-color: rgba($primary-color, 0.1);
        color: $primary-color;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: rgba($primary-color, 0.2);
        }
      }
      
      .work-tag-more {
        background-color: rgba($accent-color, 0.1);
        color: $accent-color;
        
        &:hover {
          background-color: rgba($accent-color, 0.2);
        }
      }
    }
    
    .work-description {
      font-size: 1rem;
      line-height: 1.6;
      color: $text-secondary;
      margin-top: auto;
      transition: color 0.3s ease;
      
      &:hover {
        color: $primary-color;
      }
    }
  }
  </style>